<template>
	<a-tooltip placement="topLeft">
		<template slot="title">
			<span>{{value}}</span>
		</template>
		{{ value | ellipsis(length) }}
	</a-tooltip>
</template>

<script>
export default {
	name: 'JEllipsis',
	props: {
		value: {
			type: String,
			required: false,
		},
		length: {
			type: Number,
			required: false,
			default: 25,
		}
	},
	filters: {
		ellipsis: function (v, h) {
			console.log('v:', v, h)
			let len = v.length;
			let str = v;
			if (len > h) {
				str = v.substring(0, h) + '...'
			}
			console.log('str:',str)
			return str
		}
	}
}
</script>

<style scoped>
</style>
